
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级管理</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/class.css">
    <link rel="stylesheet" href="../css/pageBtn.css">
   
</head>
<body>
    <div class="box">
        <!-- 头部 -->
        <div class="top">
            <div class="logo">
                <img src="../image/保尔科技-logo-副本.png" alt="">
            </div>
            <div class="label">
                <!-- 时间 -->
                <div class="time">
                    <p class="times"></p>
                </div>
                <!-- 刷新 -->
                <div class="refresh">
                    <img src="../image/刷新.png" alt="">
                </div>
                <!-- 头像用户名 -->
                <div class="avatar">
                    <div class="headshot">
                        <img src="../image/用户.png" alt="">
                    </div>
                    <p>娃哈哈</p>
                </div>
                <!-- 退出 -->
                <div class="quit">
                    <img src="../image/退出.png" alt="">
                </div>
            </div>
        </div>
        <!-- 下部分 -->
        <div class="down">
            <div class="left">
                 <!-- 菜单 -->
                 <ul class="myUl">
                    <li class="myLi color">
                        <div class="contL">
                            <div class="smallfig">
                                <img src="../image/班级管理蓝.png" alt="">
                            </div>
                            <p style="color:#0f6ab0">班级管理</p>
                        </div>
                    </li>
                    <li class="myLi">
                        <div class="contL">
                            <div class="smallfig">
                                <img src="../image/日常黑.png" alt="">
                            </div>
                            <p>日常</p>
                        </div>
                    </li>
                    <li class="myLi">
                        <div class="contL">
                            <div class="smallfig">
                                <img src="../image/用户管理黑u.png" alt="">
                            </div>
                            <p>用户管理</p>
                        </div>
                    </li>
                    <li class="myLi">
                        <div class="contL">
                            <div class="smallfig">
                                <img src="../image/学生档案.png" alt="">
                            </div>
                            <p>学生档案</p>
                        </div>
                    </li>
                    <li class="myLi">
                        <div class="contL">
                            <div class="smallfig">
                                <img src="../image/日志系统黑.png" alt="">
                            </div>
                            <p>日志系统</p>
                        </div>
                    </li>
                    <li class="myLi">
                        <div class="contL">
                            <div class="smallfig">
                                <img src="../image/审核系统黑.png" alt="">
                            </div>
                            <p>审核系统</p>
                        </div>
                        
                    </li>
                    <li class="myLi">
                        <div class="contL">
                            <div class="smallfig">
                                <img src="../image/项目管理黑.png" alt="">
                            </div>
                            <p>项目管理</p>
                        </div>
                       
                    </li>
                    <li class="myLi">
                        <div class="contL">
                            <div class="smallfig">
                                <img src="../image/设置.png" alt="">
                            </div>
                            <p>系统设置</p>
                        </div>
                       
                    </li>
                </ul>
            </div>
            <div class="right">
                <div class="upper">
                    <div class="search">
                        <p>班级管理</p>
                        <input type="text" placeholder="请输入班级名称">
                        <input type="date">
                        <input type="date">
                        <button>搜索</button>
                    </div>
                    <div class="add">
                        <img src="../image/加号.png" alt="">
                    </div>

                </div>
                <div class="under">
                    <table>
                        <tbody></tbody>
                    </table>
                    <!-- 分页 -->
                    <div>
                        <span class="pageCount">共？页</span>
                        <button onclick="package1(0)" class="myBtn">首页</button>
                        <button onclick="package1(1)" class="myBtn">上一页</button>
                        <button onclick="package1(2)" class="myBtn">下一页</button>
                        <button onclick="package1(3)" class="myBtn">最后一页</button>
                    </div>
                </div>
                <!-- 修改的模态框 -->
                <div class="mark">
                    <div class="model">
                        <div class="top">
                            <p>修改班级</p>
                        </div>
                        <div class="bottom">
                            <div class="bottom-item bottom-item0">
                                    <span>班级名称:&nbsp;&nbsp;&nbsp;</span>
                                    <input type="text" class="className">
                                    <span>开始时间:</span>
                                    <input type="date" class="startTime">
                            </div>
                            <div class="bottom-item">
                                <span>班级负责人:</span>
                                <select id="class-teacher">
                                </select>
                                <span>结束时间:</span>
                                <input type="date" class="endTime">
                            </div>
                            <div class="btns">
                                <button class="sure">确定</button>
                                <button class="back">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    

    </div>
</body>
<!-- 引入ajax路径端口 -->
<script src="../js/config.js"></script>
<!-- 引入封装ajax -->
<script src="../js/ajax.js"></script>
<!-- 引入首页 -->
<script src="../js/index.js"></script>
<script> 
    // 获取tbody元素
    var myTbody = document.querySelector("tbody");
    //获取模态框
    var mask = document.querySelectorAll(".mark");
    //初始页码
    var pageIndex = 1;
    //每页条数
    var pageSize = 5;
    //页数
    var pageCount = 0;
    // 分页
    var btns = document.getElementsByClassName("myBtn");
    console.log(btns);
    var span = document.querySelector(".pageCount");
    // 页面加载渲染数据
    // 
    window.onload=function(){
        classOnload()
    }
    // 班级列表
    // 
    function classOnload(){
        var json = {
            "pageIndex":pageIndex,
            "pageSize":pageSize,
        }
        ajax.Post(config.baseurl+"/clazz/selectClazz",json,function(res){
            console.log("班级列表",res);
            if(res.code == 200){
                response(res);
            }

            // 对班级结课状态进行背景颜色的更改
            var status = document.querySelectorAll(".status");
            for(var j=0;j<status.length;j++){
                if(status[j].innerHTML=="已开班"){
                    status[j].className="green";
                }else{
                    status[j].className="red";
                }
            }
            
            // 点击修改，
            // 
            var modify = document.querySelectorAll(".modify");//获取修改按钮
            for(var i=0;i<modify.length;i++){
                modify[i].onclick = function(){
                    for(var j=0;j<modify.length;j++){
                        if(this==modify[j]){
                            // 显示模态框
                            mask[0].style.display="block";
                            // 点击哪个修改获取到当前的列表
                           console.log(data[j]);
                           myData = data[j] 
                           var className = document.getElementsByClassName("className");
                           className[0].value=`${data[j].clazzName}`;
                           // 班级负责人
                            ajax.Post(config.baseurl+"/clazz/clazzLeader","",function(res){
                                console.log("负责人",res);
                                var classTeacher = document.getElementById("class-teacher");
                                // console.log(classTeacher);
                                if(res.code == 200){ 
                                    for(var i=0;i<res.dataset.length;i++){
                                        var count = `<option value="${res.dataset[i].clazzLeader}">${res.dataset[i].clazzLeader}</option>` 
                                        classTeacher.innerHTML+=count;
                                    }
                                    
                                }
                            })
                            

                            // 修改点击确定
                            var sure = document.querySelector(".sure");
                            console.log(sure);
                            sure.onclick=function(){
                                console.log(myData);
                                //调修改班级的接口
                                var json = {
                                    clazzId:myData.clazzId,
                                    startTime:document.querySelector(".startTime").value,
                                    endTime:document.querySelector(".endTime").value,
                                    clazzLeader:document.getElementById("class-teacher").value,
                                }  
                                console.log(json); 
                                ajax.Post(config.baseurl+"/clazz/updateClazz",json,function(res){
                                    console.log("修改班级",res);
                                    if(res.code == 200){
                                        alert("修改成功");
                                        // mask[0].style.display="none"; 
                                        // 刷新页面
                                        // location.reload();
                                    }else{
                                        alert("修改失败");
                                    }
                                })  
                            }

                            // 点击取消按钮
                            // 
                            var back = document.getElementsByClassName("back")[0];
                            back.onclick = function(){
                                mask[0].style.display="none"; 
                            }

                        }
                    }
                }
            }
        })

    }
    // 封装页面渲染
    // 
    function response(res){
        pageCount = res.dataset.pageCount;
        span.innerHTML='共'+pageCount+"页,当前页数"+pageIndex+"页";
        data = res.dataset.selectClazz;
        var content = `
                        <tr>
                            <td>班级序号</td>
                            <td>班级名称</td>
                            <td>班级人数</td>
                            <td>开始时间</td>
                            <td>结束时间</td>
                            <td>班级老师</td>
                            <td>班级状态</td>
                            <td>操作</td>
                        </tr>
            `;
        for(var i=0;i<data.length;i++){
                content+=`
                        <tr>
                            <td>${i+1}</td>
                            <td>${data[i].clazzName}</td>
                            <td>${data[i].clazzNowNum}</td>
                            <td>${data[i].startTime}</td>
                            <td>${data[i].endTime}</td>
                            <td>${data[i].clazzLeader}</td>
                            <td class="status">${data[i].clazzStatus}</td>
                            <td>
                                <button class="modify">修改</button>    
                            </td>
                            <td>
                                <button class="detail">详情</button>
                            </td>
                        </tr>
                `
            }
        // console.log(content);
        myTbody.innerHTML=content
        check();
    }
    // 点击添加，添加班级
    var add = document.querySelector(".add");
    add.onclick = function(){
        mask[0].style.display="block";
        mask[0].querySelector("p").innerHTML="添加班级";
        // 班级负责人
        ajax.Post(config.baseurl+"/clazz/clazzLeader","",function(res){
            console.log("负责人",res);
            var classTeacher = document.getElementById("class-teacher");
            // console.log(classTeacher);
            if(res.code == 200){ 
                for(var i=0;i<res.dataset.length;i++){
                    var count = `<option value="${res.dataset[i].clazzLeader}">${res.dataset[i].clazzLeader}</option>` 
                    classTeacher.innerHTML+=count;
                }
            }
        })

        // 点击确定按钮
        var sure = document.getElementsByClassName("sure")[0];
        sure.onclick = function(){
            //  调添加班级的接口
            var json = {
                clazzName:document.querySelector(".className").value,
                startTime:document.querySelector(".startTime").value,
                endTime:document.querySelector(".endTime").value,
                clazzLeader:document.getElementById("class-teacher").value,
            }
            ajax.Post(config.baseurl+`/clazz/addClazz`,json,function(res){
                console.log(res);
                if(res.code == 200){
                    mask[0].style.display="none"; 
                    alert(res.msg);
                    // 刷新页面
                    history.go(0);
                }
            })
        }

        // 点击取消按钮
        // 
        var back = document.getElementsByClassName("back")[0];
        back.onclick = function(){
            mask[0].style.display="none"; 
        }
    }

    // 封装分页当前按钮是否能点击
    function check(){
        // console.log(pageCount,pageIndex);
        if(pageIndex == 1 && pageIndex == pageCount){
            btns[0].disabled = true;
            btns[1].disabled = true;
            btns[2].disabled = true;
            btns[3].disabled = true;
        }else if(pageIndex == 1){//第一页
            btns[0].disabled = true;
            btns[1].disabled = true;
            btns[2].disabled = false;
            btns[3].disabled = false;
        }else if(pageIndex == pageCount){//最后
            btns[0].disabled = false;
            btns[1].disabled = false;
            btns[2].disabled = true;
            btns[3].disabled = true;
        }else{//中间
            btns[0].disabled = false;
            btns[1].disabled = false;
            btns[2].disabled = false;
            btns[3].disabled = false;
        }
    }
    // 封装控制页码的函数
    function package1(page){
    switch(page){
        case 0:
                pageIndex = 1;
                break;

        case 1:
                pageIndex -= 1;
                break;
        case 2:
                pageIndex += 1;
                break;
        case 3:
                pageIndex = pageCount;
                break;
    }
    // 进行页面重新渲染
    classOnload()
    // 当前页面分页按钮是否能点击
    check();
    }
</script>
</html>